<!--内容卡片页-->
<template>
  <div class="content-card">
    <Row v-if="apps.length > 0">
      <Col span="24" class="title-hot">
      <p class="more">更多</p>
      <p class="hot-tit">{{title}}</p>
      <i-switch @on-change="changeDisplay">
        <span slot="close"><Icon type="more"></Icon></span>
        <span slot="open"><Icon type="grid"></Icon></span>
      </i-switch>
      </Col>
      <Col span="5" offset="1" v-for="app in apps" class="content-card-div" :style="display">
      <Card>
        <router-link :to="app.link">
          <div class="img-content">
            <img :src="app.imgSrc">
          </div>
          <div class="downloads">
            <Icon type="ios-cloud-download-outline"></Icon>
            <i>{{app.downloads}}</i>
          </div>
          <div class="date">
            <Icon type="ios-clock-outline"></Icon>
            <i>{{app.date | dateStrike}}</i>
          </div>
          <h3>{{app.title}}</h3>
          <p>{{app.description}}</p>
          <router-link to="/detail">
            <Tag color="green">{{app.type}}</Tag>
          </router-link>
        </router-link>
      </Card>
      </Col>
    </Row>
  </div>
</template>

<script type="text/javascript">
  export default {
    name: 'content-card',
    props: ['apps', 'title'],
    data () {
      return {
        display: ''
      }
    },
    methods: {
      changeDisplay (status) {
        if (status) {
          this.display = 'width: 92%'
        } else {
          this.display = ''
        }
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  /* hover时候的背景色 */
  themeColor = #2c2 // 主题颜色
  backgroundHoverColor = #495060
  backgroundColor = #f6f6f6

  .img-content {
    text-align: center
    img {
      width: 128px;
      height: 120px
    }
  }

  .content-card {
    max-width: 1200px
    background: backgroundColor
  }

  .content-card-div {
    padding 20px 0
    .ivu-card:hover {
      background: backgroundHoverColor
      transform: translateY(-10px)
      transition: All .5s ease
      h3, p, a {
        color: #fff
      }
      img {
        transition: All .5s ease-in-out
        transform: rotate(10deg)
      }
      .ivu-card-body {
        color: #dddee1
      }
    }
    .downloads, .date {
      display: inline-block
    }
    .date {
      float: right
    }
    a {
      color: #aaa
      height: 20px
      line-height: 20px
    }
    h3 {
      margin-top: 20px
      font-size: 14px;
      font-weight: normal;
      color: backgroundHoverColor
      height: 44px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    p {
      margin: 5px 0;
      line-height: 20px;
      height: 60px;
      color: #777;
      font-size: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }

  .title-hot {
    width 100%
    display: flex
    margin: 20px 0
    justify-content center
    align-items center
    p.hot-tit {
      padding: 10px 0
      display block
      color: #80848f;
      text-align: center;
      font-weight: 500;
      font-size: 22px;
    }
    .ivu-switch {
      position absolute
      left: 4%
    }
    .more {
      color: #5cadff
      position absolute
      cursor pointer
      right: 4%
      &:hover {
        color: #80848f
      }
    }
  }
</style>
